<template>
	<div id="Product">
		<v-header>
			<price-header ref="priceHeader"></price-header>
		</v-header>
		
		<v-content class="width-1200">
			<div class="title"><span>产品详情</span></div>
			<div class="info my-flex-between">
				<div class="left">
					<div class="price my-flex-between">
						<div class="">
							<span>{{modelData.name}}</span>
							<li>
								<small>单价 : </small> <span class="color-red">{{modelData.priceCN}} 
								<small>/{{modelData.unitIdCN}}</small></span>
							</li>
						</div>
						<div>
							<span class="time">{{modelData.contractDate}}</span>
							<img class="hover" v-if="!modelData.collectFlag" @click="collection" src="../../assets/product/collect.png" alt="" />
							<img class="hover" v-else @click="collection" src="../../assets/product/collected.png" alt="" />
						</div>
					</div>
					<ul class="infos">
						<li>
							<span>贸易商 : </span><span>{{modelData.userName}} <span class="look hover" @click="changeRouter('/trafficker?id='+modelData.userId)">查看详情></span></span>

						</li>
						<li><span>联系人 : </span><span>{{modelData.contactName}}</span></li>
						<li>
							<span>联系电话 : </span>
							<span v-if="$store.state.userInfo && $store.state.userInfo.level &&  $store.state.userInfo.level!='ordinary_user'">{{modelData.phone}}</span>
							<span v-else>VIP可见</span>
						</li>
						<li><span>库存 : </span><span>{{modelData.qty-modelData.lockQty}}{{modelData.unitIdCN}}</span></li>
					</ul>
					<div class="tab">
						<div class="tabs my-flex-left">
							<li class="my-btn" :class="[{'active':type==1}]" @click="type=1">卖方价格</li>
							<li class="my-btn" :class="[{'active':type==2}]" @click="type=2">商品参数</li>
							<li class="my-btn" :class="[{'active':type==3}]" @click="type=3">商品附件</li>
						</div>
						<div class="tab1" v-show="type==1">
							<el-table :data="modelData.products" @row-click="changeProduct" size="medium" stripe style="width: 100%">
								<el-table-column prop="userName" label=""></el-table-column>
								<el-table-column prop="priceCN" label=""></el-table-column>
							</el-table>

							<div class="before my-flex-between">
								<span>历史价格走势</span>
								<span>历史最低价: <span class="color-red">{{lowest}}</span></span>
							</div>
							<div class="chart">
								<div class="select-time my-flex-left">
									<li class="my-btn" :class="[{'active':timeType==1}]" @click="changetimeType(1)">一周内</li>
									<li class="my-btn" :class="[{'active':timeType==2}]" @click="changetimeType(2)">一个月</li>
									<li class="my-btn" :class="[{'active':timeType==3}]" @click="changetimeType(3)">三个月</li>
								</div>
								<div id="myChart"></div>
							</div>
						</div>

						<div class="params" v-show="type==2">
							<li v-for="item in modelData.params">
								<div>{{item.key}} <span>{{item.value}}</span> </div>
								<!--<div>{{item.value}}</div>-->
							</li>
						</div>

						<div class="attachs" v-show="type==3">
							<div v-for="item in modelData.attachs">
								<div class="title">{{item.value}}</div>
								<div class="img">
									<img :src="httptool.ftpUrl+'view/'+item.key" @click="tool.preview($event,item.key)" alt="" />
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="right">
					<div class="title"><span>填写采购单</span></div>
					<div class="cont">
						<div class="my-flex-around">
							<span>购买数量</span>
							<div class="input my-flex-center">
								<!--<el-input size="small" type="number" v-model="buyParams.qty" :max="modelData.qty" :min="modelData.minBuyQty" :precision='0' placeholder="不限">
									<template slot="append">吨</template>
								</el-input>-->

								<el-input-number size="small" type="number" v-model="buyParams.qty"  :max="modelData.qty-modelData.lockQty" :min="modelData.minBuyQty" :precision='0' placeholder="不限">

								</el-input-number>

								<span class="unit">吨</span>
							</div>
						</div>
						<div class="my-flex-around">
							<li class="my-btn" @click="shopcarAdd(0)">加入购物车</li>
							<li class="my-btn" @click="shopcarAdd(1)">直接下单</li>
						</div>
						<!--<div class="concat my-flex-around">
							<div class="my-flex-col-center">
								<img src="../../assets/priceType/tel.png" alt="" />
								<span>联系ta</span>
							</div>
							<div class="my-flex-col-center">
								<img src="../../assets/priceType/concat.png" alt="" />
								<span>贸易商</span>
							</div>
						</div>-->
					</div>
				</div>
			</div>
			<!--<li @click="test">asfdsafsa</li>-->
		</v-content>

	</div>
</template>

<script>
	import service from '@/js/services/product';
	export default {
		name: 'product',
		inject: ['hasPermission'],
		data() {
			return {
				id: 239,
				modelData: {},
				tableData: [],
				type: 1,
				timeType: 1,
				xAxis: [],
				yAxis: [],
				lowest: null,
				buyParams: {
					productId: "", // (必填)(整型) 商品ID
					qty: 1, // (必填)(整型) 数量
					buyNow: 0 // (选填)(整型) 立即购买标识，当且仅当值为"1"时，表示立即购买。
				},
			}
		},
		mounted() {
			if(this.$route.query && this.$route.query.id) {
				this.id = this.$route.query.id;
				this.productGet();
			}

		},
		methods: {
			...service,
			async test() {
				console.log(1)
				console.time()
				let [a, b] = await Promise.all([this.test1(), this.test2()])
				console.timeEnd()
				console.log(a, b)
			},
			test1() {
				return new Promise(resolve => {
					setTimeout(() => {
						if(Math.random() > 0.3) {
							resolve(1)
						}
					}, 1600)
				})
			},
			test2() {
				return new Promise(resolve => {
					setTimeout(() => {
						if(Math.random() > 0.3) {
							resolve(2)
						}
					}, 1500)
				})
			},
			changetimeType(type) {
				if(this.timeType == type) {
					return;
				}
				this.timeType = type;
				this.productPrice();
			},
			async shopcarAdd(buyNow) {
				let self = this;
				this.buyParams.productId = this.modelData.id;
				this.buyParams.buyNow = buyNow;
				this.tool.isLogin(this); //判断登录
				let userInfo = this.$store.state.userInfo;
				
				if(buyNow==1){
					if(userInfo && userInfo.id && userInfo.type == 0) {
						this.$confirm('您还没有权限,请升级为企业买家，去升级吗?', '提示', {
							confirmButtonText: '去升级',
							cancelButtonText: '再想想',
							type: 'warning'
						}).then(() => {
							this.$router.push('/update');
						}).catch(() => {});
						return;
					}
					await this.hasPermission(1);
				}				
				
				this.shopcarAddProduct();
			},
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'));
				let option_ = {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: 10,
						bottom: 30,
						left: 50,
						right: 40
					},
					xAxis: {
						type: 'category',
						data: this.xAxis
					},
					yAxis: {
						type: 'value',
						min: this.lowest,
						//				        max:1400
					},
					series: [{
						data: this.yAxis,
						type: 'line',
						smooth: true,
						markLine: {
							data: [{
								name: '平均线',
								// 支持 'average', 'min', 'max'
								type: 'average'
							}]
						}
					}]
				};
				// 绘制图表
				myChart.setOption(option_);
			},
			changeProduct(row){
				console.log(row)
				
				this.$router.replace('/product?id='+row.id);
				this.id = this.$route.query.id;
				this.productGet();
			},
			changeRouter(url) {
				this.$router.push(url);
			}
		}
	}
</script>

<style lang="less" src="../../less/page/product/index.less"></style>